<template>
  <div class="filter">
    <t-dialog
      width="1166px"
      :visible.sync="visible"
      :closeBtn="false"
      placement="center"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="flex align-center justify-between" style="width: 100%;">
          <div class="drawer-head" @click="close">
            <p class="chevron-left">
              <icon-font name="chevron-left" size="18px" />
            </p>
            <h3>{{header}}</h3>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer-btn">
          <t-space size="22px">
            <div class="head-hint">
              <p>数量：</p><p>{{ formData.product_data.length }}</p>
            </div>
            <div class="head-hint">
              <p>金额：</p>
              <p>¥{{ totalPrice }}</p>
            </div>
          </t-space>
          <t-space size="24px">
            <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="confirm-btn" @click="handleConfirm">
              <icon-font name="check" size="22px" class="mr12" />
              {{ confirmBtn.content }}
            </t-button>
            <t-button theme="default" class="cancel-btn" @click="close">取消</t-button>
          </t-space>
        </div>
      </template>
      <div class="content mt16">
        <t-form :data="formData" :rules="rules" ref="form" label-align="top" layout="inline" @submit="onSubmit">
          <!--<t-form-item name="order_type" style="width: 190px;">-->
          <!--  <template #label>-->
          <!--    <p class="form-label">订单类型</p>-->
          <!--  </template>-->
          <!--  <t-select v-model="formData.order_type" :options="typeOptions" style="width: 100%;" placeholder="请选择订单类型"></t-select>-->
          <!--</t-form-item>-->
          <t-form-item name="next_warehouse_id" style="width: 190px;">
            <template #label>
              <p class="form-label">调出仓库</p>
            </template>
            <t-select v-model="formData.next_warehouse_id" :options="warehouseOptions" style="width: 100%;" placeholder="请选择调出仓库">
              <!-- 自定义底部内容 -->
              <div slot="panelBottomContent" class="select-panel-footer">
                <t-popconfirm :visible="optionVisible1" theme="danger" hover="color"
                              :confirm-btn="{
                                 size: 'medium',
                                 content: '确定'
                              }"
                              :cancel-btn="{
                                size: 'medium'
                              }"
                              @visible-change="onVisibleChange1"
                              @confirm="warehouseAdd"
                              @cancel="warehouseAddCancel">
                  <template #icon><p></p></template>
                  <template #content>
                    <div style="width: 400px;">
                      <h3 class="popconfirm-title">新建仓库</h3>
                      <div class="mt16">
                        <t-form :data="newOption" :rules="newRules" ref="optionForm" label-align="top" @submit="warehouseAddConfirm">
                          <t-form-item label="仓库类型" name="w_type">
                            <t-radio-group v-model="newOption.w_type" :options="warehouseTypeOptions"></t-radio-group>
                          </t-form-item>
                          <t-form-item label="名称" name="name">
                            <t-input v-model="newOption.name" placeholder="请输入名称"></t-input>
                          </t-form-item>
                        </t-form>
                      </div>
                    </div>
                  </template>
                  <t-button theme="primary" variant="text" block>新建仓库</t-button>
                </t-popconfirm>
              </div>
            </t-select>
          </t-form-item>
          <t-form-item name="warehouse_id" style="width: 190px;">
            <template #label>
              <p class="form-label">调入仓库</p>
            </template>
            <t-select v-model="formData.warehouse_id" :options="warehouseOptions" filterable clearable style="width: 100%;" placeholder="请选择仓库">
              <!-- 自定义底部内容 -->
              <div slot="panelBottomContent" class="select-panel-footer">
                <t-popconfirm :visible="optionVisible2" theme="danger" hover="color"
                              :confirm-btn="{
                                 size: 'medium',
                                 content: '确定'
                              }"
                              :cancel-btn="{
                                size: 'medium'
                              }"
                              @visible-change="onVisibleChange2"
                              @confirm="warehouseAdd"
                              @cancel="warehouseAddCancel">
                  <template #icon><p></p></template>
                  <template #content>
                    <div style="width: 400px;">
                      <h3 class="popconfirm-title">新建仓库</h3>
                      <div class="mt16">
                        <t-form :data="newOption" :rules="newRules" ref="optionForm" label-align="top" @submit="warehouseAddConfirm">
                          <t-form-item label="仓库类型" name="w_type">
                            <t-radio-group v-model="newOption.w_type" :options="warehouseTypeOptions"></t-radio-group>
                          </t-form-item>
                          <t-form-item label="名称" name="name">
                            <t-input v-model="newOption.name" placeholder="请输入名称"></t-input>
                          </t-form-item>
                        </t-form>
                      </div>
                    </div>
                  </template>
                  <t-button theme="primary" variant="text" block>新建仓库</t-button>
                </t-popconfirm>
              </div>
            </t-select>
          </t-form-item>
          <t-form-item name="order_date" style="width: 190px;">
            <template #label>
              <p class="form-label">订单日期</p>
            </template>
            <t-date-picker v-model="formData.order_date" style="width: 100%;" placeholder="请选择订单日期" />
          </t-form-item>
          <t-form-item name="discount_amount" style="width: 190px;">
            <template #label>
              <p class="form-label">总优惠金额</p>
            </template>
            <t-input v-model="formData.discount_amount" style="width: 100%;" placeholder="￥0.00"></t-input>
          </t-form-item>
          <t-form-item v-show="showMore" name="batch_no" style="width: 190px;">
            <template #label>
              <p class="form-label">批次编号</p>
            </template>
            <t-input v-model="formData.batch_no" style="width: 100%;" placeholder="请输入批次编号"></t-input>
          </t-form-item>
          <t-form-item v-show="showMore" name="order_no" style="width: 190px;">
            <template #label>
              <p class="form-label">单号</p>
            </template>
            <t-input v-model="formData.order_no" style="width: 100%;" placeholder="请输入单号"></t-input>
          </t-form-item>
          <t-form-item v-show="showMore" name="linkman" style="width: 190px;">
            <template #label>
              <p class="form-label">联系人</p>
            </template>
            <t-input v-model="formData.linkman" style="width: 100%;" placeholder="请输入联系人"></t-input>
          </t-form-item>
          <t-form-item v-show="showMore" name="phone" style="width: 190px;">
            <template #label>
              <p class="form-label">联系电话</p>
            </template>
            <t-input v-model="formData.phone" :maxlength="11" style="width: 100%;" placeholder="请输入联系电话"></t-input>
          </t-form-item>
          <t-form-item v-show="showMore" name="operator_name" style="width: 190px;">
            <template #label>
              <p class="form-label">经办人</p>
            </template>
            <t-input v-model="formData.operator_name" style="width: 100%;" placeholder="请输入经办人"></t-input>
          </t-form-item>
          <t-form-item style="width: 190px;">
            <div style="height: 72px;display: flex;align-items: center; padding-top: 32px">
              <t-link theme="primary" class="edit-btn-color" hover="color" @click="showMore = !showMore">{{ !showMore ? '展开' : '收起' }}更多</t-link>
            </div>
          </t-form-item>
          <t-form-item v-show="showMore" name="remark" style="width: 100%;">
            <template #label>
              <p class="form-label">备注</p>
            </template>
            <t-textarea v-model="formData.remark" style="width: 100%;" placeholder="请输入备注"></t-textarea>
          </t-form-item>
          <t-form-item name="product_data" style="width: 100%">
            <template #label>
              <p class="form-label">产品清单</p>
            </template>
            <t-table
              rowKey="id"
              :data="formData.product_data"
              :columns="columns"
              :stripe="stripe"
              :bordered="bordered"
              :hover="hover"
              :size="size"
              :max-height="maxHeight"
              :table-layout="tableLayout ? 'auto' : 'fixed'"
              :showHeader="showHeader"
              cellEmptyContent="-"
              resizable
              :loading="loading"
            >
              <template #title-slot-option></template>
              <template #thumb="{row}">
                <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                      <p class="prod-img">
                        <img alt="test" :src="row.thumb"/>
                      </p>
                      <div class="tdesign-demo-image-viewer__ui-image--hover">
                        <span><browse-icon size="1.4em"/> </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </template>
              <template #unit_price="{row}">
                <p>￥{{ row.unit_price ? row.unit_price : '0.00' }}</p>
              </template>
              <!--<template #status="{row}">-->
              <!--  <t-tag theme="success" variant="light">正常</t-tag>-->
              <!--</template>-->
              <template #option="{row}">
                <t-space size="12px">
                  <t-link theme="primary" class="edit-btn-color" hover="color" @click="handleEdit(row)">编辑</t-link>
                  <t-link theme="danger" hover="color" @click="handleDelete(row)">删除</t-link>
                  <!--<t-button theme="danger" variant="outline" hover="color">删除</t-button>-->
                </t-space>
              </template>
            </t-table>
          </t-form-item>
        </t-form>

        <div class="add-btn-wrap">
          <t-button theme="default" variant="outline" class="add-btn" @click="handleAdd">
            <p class="flex align-center">
              <icon-font name="add-circle" class="mr8" />
              新增一条
            </p>
          </t-button>
        </div>
      </div>
    </t-dialog>

    <product-list ref="list" @confirm="handleChangeProduct"></product-list>

    <!-- 填写调拨信息 -->
    <config-info ref="config" @cancel="cancelInfo" @confirm="confirmInfo"></config-info>
  </div>
</template>

<script>
import { IconFont, BrowseIcon } from "tdesign-icons-vue";
import ProductList from "@/pages/warehouse/allocation/components/product-list.vue";
import {warehouseCreateApi, warehouseListApi} from "@/api/warehouse";
import {warehouse_orderCreateApi, warehouse_orderDetailApi, warehouse_orderEditApi} from "@/api/InOutStorage";
import ConfigInfo from "@/pages/warehouse/allocation/components/config-info.vue";

export default {
  name: 'ProductAdd',
  components: {
    ConfigInfo,
    ProductList,
    IconFont,
    BrowseIcon,
  },
  data() {
    return {
      visible: false,
      header: '调拨',
      confirmBtn: {
        content: '确定调拨',
        theme: 'primary',
        loading: false
      },

      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'thumb', title: '图片', align: 'center', width: 60,},
        {colKey: 'title', title: '产品名称', width: 240, ellipsis: true},
        {colKey: 'unit_price', title: '调拨价', width: 120},
        {colKey: 'remark', title: '备注', width: 140},
        //{colKey: 'status', title: '状态', width: 140},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 80},
      ],
      maxHeight: 360,
      loading: false,
      formData: {
        order_type: 1, // 必需 订单类型（0入库；1出库；2调拨；3盘点）
        warehouse_id: '', // 必需 出/入仓库ID（调拨时：调入仓库ID）
        next_warehouse_id: '', // 可选 调出仓库ID（调拨时需要填写）
        order_date: '', // 必需 订单日期（yyyy-MM-dd）
        order_no: '', // 可选  单号（空值时系统生成）
        discount_amount: '', // 可选 总优惠金额（两位小数）
        linkman: '', // 联系人 可选
        phone: '', // 联系电话 可选
        operator_name: '', // 经办人 可选
        batch_no: '', // 批次编号 可选
        product_data: [
          //{
          //  product_id: '',// 产品ID
          //  unit_id: '',// 单位id
          //  quantity: '',// 数量两位小数
          //  is_sn: 1,// 开启SN序列号（0关闭；1开启）
          //  sn_data: '',// SN数据
          //  unit_price: 0, // 含税单价（进货价）
          //  remark: '',  // 备注（50个字内）
          //}
        ], // 可选产品清单(JSON数据）
        remark: '', // 备注
      },
      rules: {
        order_type: [{ required: true, message: '请选择订单类型', trigger: 'change' }],
        warehouse_id: [{ required: true, message: '请选择调入仓库', trigger: 'change' }],
        next_warehouse_id: [{ required: true, message: '请选择调出仓库', trigger: 'change' }],
        order_date: [{ required: true, message: '请选择订单日期', trigger: 'change' }],
        //order_no: [{ required: true, message: '请输入单号', trigger: 'blur' }],
        //discount_amount: [{ required: true, message: '请输入总优惠金额', trigger: 'blur' }],
        //linkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        //phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        //operator_name: [{ required: true, message: '请输入经办人', trigger: 'blur' }],
        //batch_no: [{ required: true, message: '请输入批次编号', trigger: 'blur' }],
        //product_data: [{ required: true, message: '请输入产品清单', trigger: 'blur' }],
      },
      typeOptions: [
        { label: '入库', value: 0 },
        { label: '出库', value: 1 },
        { label: '调拨', value: 2 },
        { label: '盘点', value: 3 },
      ],
      warehouseOptions: [],  // 仓库数据
      showMore: false,
      totalPrice: '0.00',

      optionVisible1: false,
      optionVisible2: false,
      newOption: {
        name: '',
        w_type: 1, // 仓库类型
      },
      newRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      warehouseTypeOptions: [
        // （0 平台库；1 代理商库；）
        {label: '代理商库', value: 1},
        {label: '平台库', value: 0},
      ],
      editId: '',
      type: 'add'
    }
  },
  methods: {
    onVisibleChange1(val, context = {}) {
      // trigger 表示触发来源，可以根据触发来源自由控制 visible
      if (context && context.trigger !== 'confirm') {
        this.optionVisible1 = val;
        this.newOption = {
          name: '',
          w_type: 1, // 仓库类型
        }
      }
    },
    onVisibleChange2(val, context = {}) {
      // trigger 表示触发来源，可以根据触发来源自由控制 visible
      if (context && context.trigger !== 'confirm') {
        this.optionVisible2 = val;
        this.newOption = {
          name: '',
          w_type: 1, // 仓库类型
        }
      }
    },
    // 添加仓库
    warehouseAdd() {
      this.$refs.optionForm.submit()
    },
    // 确定添加仓库
    warehouseAddConfirm({ validateResult, firstError }) {
      if (validateResult === true) {
        warehouseCreateApi(this.newOption).then(res=> {
          this.getWarehouseList()
          this.$message.success('添加成功')
          this.newOption = {
            name: '',
            w_type: 1, // 仓库类型
          }
          this.$refs.optionForm.reset()
          this.optionVisible = false
        }).catch(err=> {
          console.log(err)
        })
      } else {
        this.$message.warning(firstError);
      }
    },
    // 取消添加仓库
    warehouseAddCancel() {
      this.newOption = {
        name: '',
        w_type: 1, // 仓库类型
      }
      this.$refs.optionForm.reset()
      this.optionVisible = false
    },
    // 添加产品
    handleAdd() {
      this.$refs.list.open(this.formData.product_data);
    },
    // 编辑产品
    handleEdit(row) {
      this.$refs.config.open('first', row);
    },
    cancelInfo(data) {
      let index = this.formData.product_data.findIndex(item => item.product_id === data.product_id)
      this.formData.product_data.splice(index, 1)
      this.totalPrice = this.formData.product_data.reduce((total, item) => total + item.unit_price * item.quantity, 0).toFixed(2)
    },
    confirmInfo(data) {
      let index = this.formData.product_data.findIndex(item => item.product_id === data.product_id)
      this.formData.product_data.splice(index, 1, data)
      this.totalPrice = this.formData.product_data.reduce((total, item) => total + item.unit_price * item.quantity, 0).toFixed(2)
      this.$forceUpdate()
    },
    // 删除产品
    handleDelete(row) {
      this.formData.product_data = this.formData.product_data.filter(item => item.product_id !== row.product_id)
    },
    // 改变产品
    handleChangeProduct(value) {
      if (value) {
        this.formData.product_data = value
        this.totalPrice = value.reduce((total, item) => total + item.unit_price * item.quantity, 0).toFixed(2)
      }
    },
    // 获取列表
    getWarehouseList() {
      const params = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
      }
      warehouseListApi(params).then(res => {
        // 分组 w_type: 0平台库 w_type：1 代理商库
        const platform = res.data.filter(item => item.w_type === 0)
        const agent = res.data.filter(item => item.w_type === 1)
        this.warehouseOptions = [
          {
            group: '平台库',
            value: 'platform',
            children: platform.map(item => ({label: item.name, value: item.id}))
          },
          {
            group: '代理商库',
            value: 'agent',
            children: agent.map(item => ({label: item.name, value: item.id}))
          }
        ]
      })
    },
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.warning(firstError);
      }
    },
    handleSubmit() {
      const params = {...this.formData}
      params.product_data = JSON.stringify(params.product_data.map(item=> ({
        product_id: item.product_id, // 产品ID
        unit_id: item.unit_id,  // 单位ID
        quantity: item.quantity, // 数量两位小数
        is_sn: item.is_sn, // 开启SN序列号（0关闭；1开启）
        sn_data: item.sn_data.map(el=> el.sn).join(','), // SN数据
        unit_price: item.unit_price, // 含税单价（进货价）
        remark: item.remark, // 备注（50个字内）
      })))

      this.confirmBtn.loading = true
      this.confirmBtn.content = '提交中...'
      const requestApi = this.editId ? warehouse_orderEditApi : warehouse_orderCreateApi;
      if (this.editId) {
        params.id = this.editId
      }
      requestApi(params).then(res=> {
        this.$message.success(res.retmsg)
        this.$emit('refresh');
        this.close()
      }).catch(err=> {
        console.log(err)
      }).finally(()=> {
        this.confirmBtn.loading = false
        this.confirmBtn.content = '确定调拨'
      })
    },
    getDetail() {
      warehouse_orderDetailApi(this.editId).then(res=> {
        this.formData = {
          order_type: res.data.order_type, // 必需 订单类型（0入库；1出库；2调拨；3盘点）
          warehouse_id: res.data.warehouse_id, // 必需 出/入仓库ID（调拨时：调入仓库ID）
          next_warehouse_id: res.data.next_warehouse_id, // 可选 调出仓库ID（调拨时需要填写）
          order_date: res.data.order_date, // 必需 订单日期（yyyy-MM-dd）
          order_no: res.data.order_no, // 可选  单号（空值时系统生成）
          discount_amount: res.data.discount_amount, // 可选 总优惠金额（两位小数）
          linkman: res.data.linkman, // 联系人 可选
          phone: res.data.phone, // 联系电话 可选
          operator_name: res.data.operator_name, // 经办人 可选
          batch_no: res.data.batch_no, // 批次编号 可选
          product_data: res.data.product.map(item=> ({
            thumb: item.product_thumb,
            title: item.product_title,
            product_id: item.product_id, // 产品ID
            unit_id: item.unit_id,  // 单位ID
            quantity: item.quantity, // 数量两位小数
            is_sn: item.is_sn, // 开启SN序列号（0关闭；1开启）
            sn_data: item.sn_data.split(',').map((el, index)=> ({index, sn: el})), // SN数据
            unit_price: item.unit_price, // 含税单价（进货价）
            remark: item.remark, // 备注（50个字内）
          })),
          remark: res.data.remark
        }

        if (this.formData.product_data) {
          this.totalPrice = this.formData.product_data.reduce((total, item) => total + item.unit_price * item.quantity, 0).toFixed(2)
        }
      }).catch(err=> {
        console.log(err)
      })
    },
    open(type, data={}) {
      this.type = type
      this.editId = data.id || ''
      this.getWarehouseList()
      this.header = '调拨'
      this.visible = true
      this.formData = {
        order_type: 2, // 必需 订单类型（0入库；1出库；2调拨；3盘点）
        warehouse_id: '', // 必需 出/入仓库ID（调拨时：调入仓库ID）
        next_warehouse_id: '', // 可选 调出仓库ID（调拨时需要填写）
        order_date: this.$dayjs().format("YYYY-MM-DD"), // 必需 订单日期（yyyy-MM-dd）
        order_no: '', // 可选  单号（空值时系统生成）
        discount_amount: '', // 可选 总优惠金额（两位小数）
        linkman: '', // 联系人 可选
        phone: '', // 联系电话 可选
        operator_name: '', // 经办人 可选
        batch_no: '', // 批次编号 可选
        product_data: [
          //{
          //  product_id: '',// 产品ID
          //  unit_id: '',// 单位id
          //  quantity: '',// 数量两位小数
          //  is_sn: 1,// 开启SN序列号（0关闭；1开启）
          //  sn_data: '',// SN数据
          //  unit_price: 0, // 含税单价（进货价）
          //  remark: '',  // 备注（50个字内）
          //}
        ], // 可选产品清单(JSON数据）
        remark: '',  // 备注（50个字内）
      }
      this.$refs.form.reset()
      this.totalPrice = '0.00'
      if (this.editId) {
        this.getDetail()
      }
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.select-panel-footer {
  border-top: 1px solid var(--td-component-stroke);
  padding: 14px;
}

.head-hint {
  display: flex;
  align-items: center;

  font-size: 16px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;

  p:first-child {
    color: var(--td-font-gray-2);
  }
}

.content {
  height: 60vh;
}

.add-btn-wrap {
  padding-top: 24px;
  border-top: 1px solid #E1E1E1;
}

.add-btn {
  width: 140px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

/deep/ .t-dialog__body {
  padding-top: 0;
  margin-top: var(--td-comp-paddingTB-l);
}

/deep/ .t-dialog__footer {
  height: 75px;
}

.footer-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xxl);
  background-color: #F9F9F9;
  border-bottom: 1px solid #F9F9F9;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confirm-btn {
  width: 190px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.cancel-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  background-color: #B8B8B8;
  border-radius: var(--td-radius-medium);
}
</style>
